<template>
  <el-form
    ref="ruleFormRef"
    :model="formInline"
    :rules="formRules"
    label-width="100px"
  >
    <el-row :gutter="30">
      <el-col :xs="24" :sm="12">
        <el-form-item label="权限名称" prop="name">
          <el-input
            v-model="formInline.name"
            clearable
            placeholder="请输入权限名称"
          />
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12">
        <el-form-item label="权限标识" prop="code">
          <el-input
            v-model="formInline.code"
            clearable
            placeholder="请输入权限标识，如：system:user:add"
          />
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12">
        <el-form-item label="权限类型" prop="type">
          <el-select
            v-model="formInline.type"
            placeholder="请选择权限类型"
            class="w-full"
          >
            <el-option label="菜单权限" :value="1" />
            <el-option label="按钮权限" :value="2" />
            <el-option label="数据权限" :value="3" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12">
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="formInline.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :xs="24">
        <el-form-item label="权限描述" prop="description">
          <el-input
            v-model="formInline.description"
            type="textarea"
            :rows="3"
            placeholder="请输入权限描述"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import type { FormRules } from "element-plus";
import { type PermissionFormProps } from "./utils/types";

const props = withDefaults(defineProps<PermissionFormProps>(), {
  formInline: () => ({
    id: null,
    name: "",
    code: "",
    type: 1,
    status: 1,
    description: ""
  })
});

const ruleFormRef = ref();
const formInline = reactive(props.formInline);

const formRules = reactive(<FormRules>{
  name: [{ required: true, message: "权限名称为必填项", trigger: "blur" }],
  code: [
    { required: true, message: "权限标识为必填项", trigger: "blur" },
    {
      pattern: /^[a-zA-Z0-9:_-]+$/,
      message: "权限标识只能包含字母、数字、冒号、下划线和横线",
      trigger: "blur"
    }
  ],
  type: [{ required: true, message: "权限类型为必选项", trigger: "change" }]
});

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>
